import { defineStore } from 'pinia'
import { computed, watch } from 'vue'

export const useThemeStore = defineStore('theme', {
  state: () => {
    // 从本地存储获取初始主题模式
    const savedDarkMode = localStorage.getItem('theme-dark') === 'true'
    
    return {
      isDark: savedDarkMode,
      // 主题色配置
      themeConfig: {
        primary: '#409EFF'
      }
    }
  },
  
  getters: {
    darkMode: (state) => state.isDark
  },
  
  actions: {
    toggleDark() {
      this.isDark = !this.isDark
      this.applyDarkMode()
    },
    
    applyDarkMode() {
      // 保存到本地存储
      localStorage.setItem('theme-dark', this.isDark)
      
      // 切换 Element Plus 暗黑模式
      if (this.isDark) {
        document.documentElement.classList.add('dark')
        document.body.setAttribute('data-theme', 'dark')
      } else {
        document.documentElement.classList.remove('dark')
        document.body.removeAttribute('data-theme')
      }
      
      // 应用Element UI暗色主题
      this.applyElementDarkTheme(this.isDark)
    },
    
    // 初始化主题
    initTheme() {
      this.applyDarkMode()
    },
    
    // 应用Element UI暗色主题
    applyElementDarkTheme(isDark) {
      // 这里可以添加额外的暗色主题设置
    }
  }
})